<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>公司邮箱设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <!-- 查询条件 -->
    <div class="companyMaterialTable">
      <el-container style="height:100%">
        <el-aside width="30%" class="aside">
          <div class="companyMaterialForm" v-loading="loading">
            <el-form class="material-form" :model="companyEmail" label-width="120px">
              <el-form-item label="smtp服务器地址">
                <el-input class="form-input" v-model="companyEmail.host"></el-input>
              </el-form-item>
              <el-form-item label="smtp服务器端口">
                <el-input class="form-input" v-model="companyEmail.port"></el-input>
              </el-form-item>
              <el-form-item label="使用类型">
                <el-select placeholder="请选择类型" v-model='companyEmail.type' class="form-input">
                  <el-option :value="1" label="采购"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select placeholder="请选择类型" v-model='companyEmail.status' class="form-input">
                  <el-option :value="1" label="使用"></el-option>
                  <el-option :value="2" label="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input class="form-input" v-model="companyEmail.email"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input class="form-input" v-model="companyEmail.password"></el-input>
              </el-form-item>

              <el-form-item label="创建人">
                {{companyEmail.createUser}}
              </el-form-item>
              <el-form-item label="创建时间">
                {{companyEmail.createTime}}
              </el-form-item>
              <el-form-item label="最后修改人">
                {{companyEmail.updateUser}}
              </el-form-item>
              <el-form-item label="最后修改时间">
                {{companyEmail.updateTime}}
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateCompanyEmail">修改</el-button>
                <el-button type="primary" @click="addCompanyEmail">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-aside>

        <el-main width="70%" class="main">
          <div>
            <el-table fit stripe border :data="companyEmailList" style="width:100%" @row-click="gerOneEmail">
              <el-table-column :resizable="false" prop="host" label="smtp服务器" :auto-width="true" min-width="100px"></el-table-column>
              <el-table-column :resizable="false" prop="port" label="smtp端口" :auto-width="true" min-width="100px"></el-table-column>
              <el-table-column :resizable="false" prop="email" label="邮箱" :auto-width="true" min-width="100px"></el-table-column>
              <el-table-column :resizable="false" label="类型">
                <template slot-scope="scope">
                  <span v-if=" scope.row.type==1">采购</span>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==1">使用</span>
                  <span v-if="scope.row.status==2">禁用</span>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
              <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount"
                :current-page.sync="pagination.currentPage" @current-change="pageChange">
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
  <script src="../myJs/importFile.js"></script>
  <script>
    importFile();
  </script>
  <script src="../vueSystem/components/sysCommonSearch.js"></script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: function () {
        // 搜索条件
        return {
          companyEmail: {
            id: '',
            createUser: '',
            createTime: '',
            updateUser: '',
            updateTime: '',
            status: 1,
            host: '',
            port: '',
            email: '',
            password: '',
            type: 1
          },
          companyEmailList: [],
          loading: false,
          updateDialog: false,
          moment: moment,
          pagination: {
            currentPage: 1,
            totalCount: 0,
            pageSize: 10
          }
        };
      },
      created: function () {
        this.setCompanyEmailList();
        // 				this.getMaterialTechnology(true);
      },
      methods: {
        setCompanyEmailList: function () {
          var self = this;
          ajaxRequest("companyEmail/getCompanyEmailList").then(function (res) {
            self.companyEmailList = res;
          }).catch(function (error) {
            console.log(error);
          });
        },
        gerOneEmail: function (row) {
          this.companyEmail = _.cloneDeep(row);
        },
        updateCompanyEmail: function () {
          var self = this;
          var param = this.companyEmail;
          ajaxRequest("companyEmail/updateCompanyEmail", param).then(function (res) {
            self.$message({
              showClose: true,
              message: res,
              type: 'success'
            });
            self.companyEmail = '';
            self.setCompanyEmailList();
          }).catch(function (error) {
            console.log(error);
          });
        },
        addCompanyEmail: function () {
          var self = this;
          var param = this.companyEmail;
          ajaxRequest("companyEmail/addCompanyEmail", param).then(function (res) {
            self.$message({
              showClose: true,
              message: res,
              type: 'success'
            });
            self.companyEmail = '';
            self.setCompanyEmailList();
          }).catch(function (error) {
            console.log(error);
          });
        }
      }
    });
  </script>
</body>

<style>
  .companyMaterialTable {
    overflow: auto;
    height: 100%;
    min-height: 400px;
  }

  .aside {
    padding-top: 20px;
  }
  .aside,.main{
    overflow: auto;
  }
</style>

</html>